
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置模拟Token</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
        h1 { color: #333; }
        p { color: #666; line-height: 1.6; }
        .token-area { margin: 20px 0; padding: 20px; background: #f5f5f5; border-radius: 8px; }
        code { background: #e8e8e8; padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', Courier, monospace; }
        .btn { display: inline-block; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
        .btn:hover { background: #1565c0; }
        .success { color: #4caf50; margin-top: 10px; }
    </style>
</head>
<body>
    <h1>设置模拟Token</h1>
    <p>由于后端服务（localhost:8081）未运行，导致每次刷新页面时都会触发403错误。</p>
    <p>我们已经修改了路由守卫，当后端服务不可用时会跳过token验证，但你仍然需要在localStorage中设置一个token。</p>
    
    <div class="token-area">
        <p>点击下方按钮在当前域名下设置一个模拟token，然后刷新订单页面即可正常访问：</p>
        <button class="btn" onclick="setMockToken()">设置模拟Token</button>
        <div id="result" class="success"></div>
    </div>
    
    <p>或者你也可以手动在浏览器控制台中执行以下代码：</p>
    <code>localStorage.setItem('token', 'mock-token-for-testing');</code>
    
    <script>
        function setMockToken() {
            try {
                localStorage.setItem('token', 'mock-token-for-testing');
                document.getElementById('result').textContent = '✅ Token已成功设置！现在可以刷新订单页面了。';
            } catch (e) {
                document.getElementById('result').textContent = '❌ 设置Token失败：' + e.message;
            }
        }
        
        // 检查是否已有token
        if (localStorage.getItem('token')) {
            document.getElementById('result').textContent = '当前已有Token，你可以直接刷新订单页面。';
        }
    </script>
</body>
</html>
